<template>
  <view class="transaction-record-page">
    <!-- 类型筛选栏 -->
    <view class="filter-bar">
      <picker 
        class="type-picker" 
        mode="selector" 
        :range="types" 
        :value="selectedTypeIndex" 
        @change="handleTypeChange"
      >
        <view class="picker-view">
          <text>类型</text>
          <text class="selected-type">{{ types[selectedTypeIndex] }}</text>
          <image class="arrow-icon" src="/static/icons/arrow-down.png" mode="widthFix"></image>
        </view>
      </picker>
    </view>

    <!-- 交易记录列表 -->
    <view class="record-list">
      <view 
        class="record-card" 
        v-for="(record, index) in filteredRecords" 
        :key="index"
      >
        <!-- 交易时间 -->
        <text class="record-time">{{ record.time }}</text>
        
        <!-- 交易详情区域 -->
        <view class="record-details">
          <view class="detail-row">
            <text class="detail-label">交易单号：</text>
            <text class="detail-value">{{ record.tradeNo }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">购买套餐：</text>
            <text class="detail-value">{{ record.packageName }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">购买数量：</text>
            <text class="detail-value">{{ record.quantity }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">支付类型：</text>
            <text class="detail-value">{{ record.payType }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">套餐类型：</text>
            <text class="detail-value">{{ record.packageType }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">支付金额：</text>
            <text class="detail-value amount">{{ record.amount }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 筛选类型列表
      types: ['全部', '游戏币', '预付款', '游乐币', '计次票'],
      // 当前选中的类型索引
      selectedTypeIndex: 0,
      // 交易记录数据
      records: [
        {
          time: '2025-4-2 15:00:00',
          tradeNo: '123456789790',
          packageName: '100游戏币',
          quantity: 1,
          payType: '微信',
          packageType: '游戏币',
          amount: '100.00'
        },
        {
          time: '2025-4-2 15:00:00',
          tradeNo: '123456789790',
          packageName: '100预付款',
          quantity: 1,
          payType: '微信',
          packageType: '预付款',
          amount: '100.00'
        },
        {
          time: '2025-4-2 15:00:00',
          tradeNo: '123456789790',
          packageName: '100游乐币',
          quantity: 1,
          payType: '微信',
          packageType: '游乐币',
          amount: '100.00'
        },
        {
          time: '2025-4-2 15:00:00',
          tradeNo: '123456789790',
          packageName: '100预票',
          quantity: 1,
          payType: '微信',
          packageType: '计次票',
          amount: '100.00'
        }
      ]
    };
  },
  computed: {
    // 根据选中类型筛选记录
    filteredRecords() {
      if (this.selectedTypeIndex === 0) { // 全部类型
        return this.records;
      }
      const selectedType = this.types[this.selectedTypeIndex];
      return this.records.filter(record => record.packageType === selectedType);
    }
  },
  mounted() {
  	uni.setNavigationBarTitle({
  		title: this.$t('title.memberComboOrderRecord')
  	});
  },
  methods: {
    // 处理类型筛选变化
    handleTypeChange(e) {
      this.selectedTypeIndex = e.detail.value;
    }
  }
};
</script>

<style scoped>
/* 页面容器 */
.transaction-record-page {
  min-height: 100vh;
  background-color: #f5f7fa;
}

/* 筛选栏样式 */
.filter-bar {
  background-color: #ffffff;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}

/* 类型选择器 */
.type-picker {
  width: 100%;
}

.picker-view {
  display: flex;
  align-items: center;
  color: #333;
}

.picker-view text:first-child {
  font-size: 15px;
  margin-right: 8px;
  color: #666;
}

.selected-type {
  font-size: 15px;
  font-weight: 500;
  flex: 1;
}

/* 下拉箭头图标 */
.arrow-icon {
  width: 16px;
  height: 16px;
  opacity: 0.6;
}

/* 记录列表容器 */
.record-list {
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 单条记录卡片 */
.record-card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* 交易时间 */
.record-time {
  display: block;
  font-size: 15px;
  color: #333;
  font-weight: 500;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #f0f0f0;
}

/* 详情区域 */
.record-details {
  margin-top: 10px;
}

/* 详情行 */
.detail-row {
  display: flex;
  margin-bottom: 8px;
  line-height: 1.5;
}

.detail-row:last-child {
  margin-bottom: 0;
}

/* 详情标签 */
.detail-label {
  font-size: 14px;
  color: #666;
  width: 90px;
  flex-shrink: 0;
}

/* 详情值 */
.detail-value {
  font-size: 14px;
  color: #333;
  flex: 1;
  word-break: break-all;
}

/* 金额样式 */
.amount {
  color: #ff4d4f;
  font-weight: 500;
}
</style>